<template>
  <div>
    <div v-for="(item,itemIndex) in items" :key="itemIndex" class="flex">
      <el-input
        v-model="item.c"
        placeholder="请输入内容"
      >
      </el-input>
      <div class="op">
        <el-button size="mini" type="danger">删除</el-button>
      </div>
    </div>
    <div class="btn-area">
      <el-button size="mini" type="primary">
      添加
      </el-button>
    </div>
  </div>
</template>

<script>
export default {
  name: "MultipleInput",
  props: {
    limit: {
      type: Number,
      default: 5
    },
    value: {
      type: String
    }
  },
  watch: {
    value() {
      if (this.changed) {
        this.changed = false
        return
      }
      if (this.value) {
        this.items = JSON.parse(this.value)
      } else {
        this.items = []
      }
      if (!this.items.length) {
        this.items.push({
          c: ''
        })
      }
    },
    items() {
      this.changed = true
      this.$emit('input', JSON.stringify(this.items.filter(el => el.c.trim())))
    }
  },
  data() {
    return {
      items: [{
        c: ''
      }]
    }
  }
}
</script>

<style scoped lang="scss">
.op {
  padding-left: 20px;
}
.btn-area{
  padding-top: 10px;
}
</style>
